<template>
  <!-- 主题购买和 切换 -->
  <div class="service-box " >
    <div class="content flex" v-if="shopInfo&&themeList&&themeList.length&&serviceList">
      <div class="service-item zc moren" >
          <!-- <div class="name"></div> -->
          <div class="top">
            <div class="flex">
              <div class="endtime"><span>到期时间：</span>长期有效</div>
              <!-- <div class="sign"  v-text="'正常'"> </div> -->
              <!-- <div class="sign useSing" :class="{unuse:shopInfo.useTheme!=mianfei.businessId}"  v-text="shopInfo.useTheme==mianfei.businessId? '使用中':'未使用'"></div> -->
            
            
            </div>

            <!-- <div class="auto" >
              <span>自动续费：</span>
              <el-switch
                @change="editAuto($event,item)"
                :disabled="nowDate==item.closeTime"
                v-model="item.isAuto"
                :active-value="1"
                :inactive-value="2">
              </el-switch>
            </div> -->
            <div class="tip" >
              {{`默认主题黄丹橙，永久免费。`}}
            </div>
            
          </div>
          <div class="btns">
            <!-- <span  style="color:#FA6400">已开通长期</span> -->
            <div>
              <el-button v-if="shopInfo.useTheme!=mianfei.businessId" size="small" type="primary" @click="setTheme(mianfei)" v-loading="loading">立即使用</el-button>
            </div>
            <div v-if="shopInfo.useTheme==mianfei.businessId" class="sign useSing" >
              <el-button  size="small" type="primary" >使用中</el-button>
            </div>
          </div>
      </div>
      <div :style="{backgroundImage:`url(${item.img})`}" class="service-item " :class="{'jjdq':dayNum(item.closeTime)<7&&dayNum(item.closeTime)>=0,'zc':item.state==1,'dq':item.state==2,'wkt':!item.businessId}" v-for="(item,i) in themeList" :key="i">
          <div class="top">
            <!-- <div class="name flex">
              {{item.name}}
            </div> -->
            <!-- <div class="img" v-if="item.img">
              <img @click="handlePictureCardPreview(item.img)" :src="item.img" alt="" style="width:100%;cursor: pointer;">
            </div> -->
            <div class="flex">
              <div class="endtime" v-if="item.businessId"><span>到期时间：</span>{{item.closeTime}}</div>
              <div class="sign"  v-text="dayNum(item.closeTime)<5&&dayNum(item.closeTime)>=0?'即将到期':(item.state==1?'正常':(item.businessId? '到期':'未开通'))">
            </div>
              <div class="sign useSing" :class="{unuse:shopInfo.useTheme!=item.businessId}" v-if="item.businessId" v-text="shopInfo.useTheme==item.businessId? '使用中':'未使用'"></div>
            
            
            </div>

            <div class="auto" >
              <span>自动续费：</span>
              <el-switch
                @change="editAuto($event,item)"
                :disabled="nowDate==item.closeTime"
                v-model="item.isAuto"
                :active-value="1"
                :inactive-value="2">
              </el-switch>
            </div>
            <div class="tip" >
              {{`自动续费开启后，系统将在服务有效期最后一天，续费1个月。`}}
            </div>
            
          </div>
          <div class="btns">
            <!-- <el-button style="background-color:#fff;border:1px solid #f2f2f2" size="small" @click="lianxi(item.businessId)" v-if="item.type==2">联系技术</el-button> -->
            <el-button v-if="!item.businessId" size="small" type="success" @click="kaitong(item)" v-loading="loading">开通</el-button>
            <el-button v-if="item.buyWay==2&&item.businessId" size="small" type="warning" @click="submitForm(item)" v-loading="loading">续费</el-button>
            
            <span v-if="item.buyWay!=2&&item.businessId" style="color:#24A813">已开通长期</span>
            <el-button v-if="item.state==1&&shopInfo.useTheme!=item.businessId" size="small" type="liji" @click="setTheme(item)" v-loading="loading">立即使用</el-button>
          </div>
      </div>
    </div>
    <div v-else style="text-align:center;line-height:300px">
        暂未开通任何服务
    </div>
</div>
</template>

<script>
import { getThemeList,setTheme } from "@/api/system/themeManage.js";
import valueAddedServices from '@/api/shanghuduan/valueAddedServices'
import { formatDate } from "@/utils/index";

import { mapGetters } from "vuex";
export default {
  name: "",
  props:['tenantId','campNumber'],
  components:{},
  data() {
    return {
      loading:false,
      serviceList:null,
      // 查询参数
      queryParams: {
        closeTimeStart: "",
        closeTimeEnd: "",
        dataType: "all",
        type:'3',
      },
      nowDate:'',
      mianfei:{
        name:'默认主题',
        img:'https://imgage.maimaihao.com/402883e68dfd0e80018dfd164916000a.jpg',
        closeTime:'2099-12-31',
        businessId:1,
        state:1,
      },
      themeList:[],
      tenantIdCur:'',//当前租户id
      campNumberCur:'',//当前租户虞豆
    };
  },
  watch:{
    tenantId:{
      handler(newVal){
        this.tenantIdCur = newVal
        this.getthemeList()
      },
      immediate:true
    },
    campNumber:{
      handler(newVal){
        this.campNumberCur = newVal
      },
      immediate:true
    }
  },
  created() {
    let date = new Date()
    this.nowDate = formatDate(date).slice(0,10)
  },
  computed:{
    ...mapGetters(["userInfo","shopInfo"]),
    dayNum(){
      return (val)=>{
        let date = (Date.parse(new Date(val)))/1000
        var today=(Date.parse(new Date()))/1000;//当前时间戳
        var nTime = date - today;
        var day =Math.floor(nTime/86400)+1;
        return day;
      }
      
    }
  },
  methods: {
    // 获取所有的主题列表
    getthemeList(){
      this.loading = true;
      getThemeList({isShow:1,isPage:2}).then(
        response => {
          this.themeList = response.rows;
          // this.total = response.total;
          this.getMyService(this.tenantIdCur)
          this.loading = false;
        }
      );
    },
    
 
    // 获取租户开通的增值服务
    getMyService(tenantId){
      // if()
      this.queryParams.tenantId = tenantId
      valueAddedServices.myValueAddedServiceList(this.queryParams).then(res=>{
        if(res.rows&&res.rows.length){
          this.serviceList = res.rows
        }else{
          this.serviceList = []
        }
        this.mergeServices()
      })
    },
    // 合并获取到的已开通服务和全部服务列表
    mergeServices(){
      if(this.serviceList&&this.serviceList.length){
        this.themeList.forEach((r1,i1)=>{
              this.serviceList.forEach(r2=>{
                if(r1.id==r2.businessId){
                  this.themeList[i1] = {...r1,...r2}
                }
              })
            })
        this.$forceUpdate()
      }
    },
    // 改变自动续费状态
    editAuto(e,item){
      valueAddedServices.myValueAddedServiceChangeAuto(item).then(res=>{
        this.getMyService(this.tenantIdCur)
      })
    },
   // 开通主题
   kaitong(item){
    item.serveType=3
      this.$emit('kaitong',item)
    },
    // 续费主题
    submitForm(item){
      console.log("%c Line:184 🍆 i11111111111111111111111tem", "color:#2eafb0", item);
      item.serveType=3
      this.$emit('xufei',item)
    },
    // 设置主题
    async setTheme(item){

      try {
        await setTheme({
          tenantId:this.tenantId,
          useTheme:item.businessId
        })
        this.$store.dispatch('getShopInfo')
        this.$alert('店铺商城主题设置成功！')
        
      } catch (error) {
        
      }
      
    },
    // 图片预览
    handlePictureCardPreview(url) {
      this.$viewerApi({
        images: [url]
      });
    },
    
  }
};
</script>
<style scoped lang="scss">
    .service-box{
    min-height: 800px;
    background-color: #fff;
    .content{
      flex-wrap: wrap;
    }
    
    .service-item{
      width: 470px;
      height: 395px;
      
      // border: 1px solid #24A813;
      // height: 130px;
      border-radius: 10px;
      margin: 0 0 10px 10px;
      position: relative;
      overflow: hidden;
      color: #fff;
      line-height: 22px;
      background-color: #b5b5b5;
      background-size: 100% 100%;
      padding-top: 270px;
      
      .top{
        padding: 0 15px;
        // padding-top: 40px;
        // background-color: #8cc7a3;
        // min-height: 160px;
     
      }
      .btns{
        text-align: center;
        padding: 5px 0;
        // background-color: #fff;
        // .el-button{
        //   background-color: #24A813;
        //   border: #24A813;
        // }
      }
      .tip{
       margin-top: 5px;
      }
      .sign{
        // position: absolute;
        // top: 2px;
        // right: 2px;
        font-size: 12px;
        color: #fff;
        padding: 2px 15px;
        background-color: #24A813;
        border-radius: 4px;
        margin-left: 6px;
      }
      .useSing{
        // left: 0;
        // right: auto;
        color: #fff !important;
        &.unuse{
          color: #fff;
          background-color: #E6A23C;
        }
      }
      
      
      .btns{
          .el-button.el-button--liji{
            background-color: #D864FF;
            border: #D864FF;
            color: #fff;
          }
        }
      &:nth-of-type(2){
        div,span{
          color: #D864FF;
        }
        .tip{
          color: #999999;
        }
        ::v-deep .el-switch.is-checked .el-switch__core{
          border-color: #D864FF !important;
          background-color: #D864FF !important;
        }
        
      }
      &:nth-of-type(3){
        div,span{
          color: #02EFC5;
        }
        .tip{
          color: #999999;
        }
        ::v-deep .el-switch.is-checked .el-switch__core{
          border-color: #02EFC5 !important;
          background-color: #02EFC5 !important;
        }
        
      }
      .sign{
        color: #fff !important;
      }
      &.jjdq{
        
        .sign{
          background-color: #fab562;
        }
      }
      &.dq{
        .sign{
          background-color: #DA6565;
        }
      }
      &.wkt{
        background-color: #b5b5b5;
      }
      &.moren{
        background-image: url('https://imgage.maimaihao.com/themes/zhutimoren.png');
        padding-top:280px;
        color: #FA6400;
        // .name{
        //   width: 131px;
        //   height: 34px;
        //   background-image: url('../../assets/img/morenzhuti.png');
        //   background-size: 100% 100%;
        //   // margin: 0 auto;
        //   // margin-top: 30px;
        //   margin-left: 15px;
        // }
        .tip{
          color: #999;
        }
        .btns{
          margin: 0 auto;
          // margin-top: 6px;
          // >span{
          //   margin-bottom: 10px;
          // }
        
          .el-button{
            background-color: #FA6400;
            border: #FA6400;
            margin-top:5px;
          }
          .useSing{
            background-color: transparent;
            .el-button{
              background-color: #24A813;
              border: #24A813;
            }
          }
        }
        
      }
    }
  }

  .list-box{
      flex-wrap: wrap;
    }
    .plantform-item{
      // width: 110px;
      cursor: pointer;
      line-height: 28px;
      overflow: hidden;
      text-align: center;
      border: 1px solid $grey;
      border-radius: 3px;
      padding: 0 20px;
      margin-right: 20px;
      margin-bottom: 10px;
      white-space: nowrap;
    }

    .allQudao{
      margin-bottom: 15px;
    }
</style>
